<%@page import="com.gfa4j.resource.ResourceManagerServer"%>
<%@page import="com.wef.common.util.CommonMessageDomain"%>
<%@ include file="/pages/common/taglib.jsp"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
		<title></title>
		<%@include file="/styles/css_lib.jsp"%>
		<%@include file="/scripts/widgets/jquery-ui/css_lib.jsp"%>
		<link rel="stylesheet" type="text/css" href="${ctx}/pages/demo/demo.css" />
		
		<%@include file="/pages/common/js_global.jsp"%>
		<%@include file="/scripts/sdk/js_lib.jsp"%>
		<%@include file="/scripts/config/js_lib.jsp" %>
		<%@include file="/scripts/utils/js_lib.jsp"%>
		<%@include file="/scripts/i18n/js_lib.jsp"%>
		<%@include file="/scripts/format/js_lib.jsp"%>
		<%@include file="/scripts/validate/js_lib.jsp"%>
		<%@include file="/scripts/widgets/jquery-ui/js_lib.jsp"%>
		<%@include file="/scripts/widgets/datePicker/js_lib.jsp"%>
		<script type="text/javascript" src="${ctx}/pages/demo/demo.js"></script>
		
		<script type="text/javascript">
			$(window).ready(function(){
				
				//初始化控件验证规则
				$.jqValidator.initValidateRules("#form1");
				//初始化控件格式化规则
				$.jqFormatter.initFormatRules("#form1");
				
				$("a[id^='aDiv']").click(function(){
					var num = $(this).attr("id").substr(4,2);
					$('#div'+num).attr('title',i18n.message.msg).dialog($.extend({},dialogConfig,{width:1000}));
				});
				
			});
		</script>
	</head>
<body class="body">
	<!--Content-->
	<form action="" id="form1">
		<div id="Content_Show">
			<div>
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能:1.支持原生Text的所有功能,如下: (<a href="#" id="aDiv1">查看源码</a>)
				</div>
				<div id="div1" style="display: none;">
					&lt;k:text property="text" /&gt;
				</div>
				<div>
					&nbsp;&nbsp;原生Text<k:text property="text" />
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能:2.支持输入自动转大小写,如下:(<a href="#" id="aDiv2">查看源码</a>)
				</div>
				<div id="div2" style="display: none;">
					输入转大写:&lt;k:text property="text" formatRules="{toUpperCase:true}"/&gt;<br /> 
					输入转小写:&lt;k:text property="text" formatRules="{toLowerCase:true}"/&gt;<br />
				</div>
				<div>
					&nbsp;&nbsp;输入转大写:<k:text property="text" formatRules="{toUpperCase:true}" />
					&nbsp;&nbsp;输入转小写:<k:text property="text" formatRules="{toLowerCase:true}" />
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：3.支持去掉多余空格，如下：(<a href="#" id="aDiv3">查看源码</a>)
				</div>
				<div id="div3" style="display: none;">
					去前置空格:&lt;k:text property="text" styleClass="text" formatRules="{trimBegin:true}"/&gt;<br /> 
					去后置空格:&lt;k:text property="text" styleClass="text" formatRules="{trimEnd:true}"/&gt;<br /> 
					去前后置空格:&lt;k:text property="text" styleClass="text" formatRules="{trimBoth:true}"/&gt;<br /> 
					去全部空格:&lt;k:text property="text" styleClass="text" formatRules="{trimAll:true}"/&gt;<br />
				</div>
				<div>
					&nbsp;&nbsp;去前置空格:<k:text property="text" styleClass="text" formatRules="{trimBegin:true}" />
					&nbsp;&nbsp;去后置空格:<k:text property="text" styleClass="text" formatRules="{trimEnd:true}" />
					&nbsp;&nbsp;去前后置空格:<k:text property="text" styleClass="text" formatRules="{trimBoth:true}" />
					&nbsp;&nbsp;去全部空格:<k:text property="text" styleClass="text" formatRules="{trimAll:true}" />
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：4.支持设置聚焦时是否全选，如下：(<a href="#" id="aDiv4">查看源码</a>)
				</div>
				<div id="div4" style="display: none;">
					聚焦时全选:&lt;k:text property="text" styleClass="text" onfocus="this.select()"/&gt;<br />
				</div>
				<div>
					&nbsp;&nbsp;聚焦时全选<k:text property="text" styleClass="text" onfocus="this.select()"/>
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：5.支持是否 数字/email/电话号码，如下：(<a href="#" id="aDiv5">查看源码</a>)
				</div>
				<div id="div5" style="display: none;">
					数字:&lt;k:text property="text" styleClass="text" validateRules="{number:true}"/&gt;<br /> 
					email:&lt;k:text property="text" styleClass="text" validateRules="{email:true}"/&gt;<br /> 
					电话号码:&lt;k:text property="text" styleClass="text" validateRules="{phoneNumber:true}"/&gt;<br />
				</div>
				<div>
					&nbsp;&nbsp;数字:<k:text property="text" styleClass="text" validateRules="{number:true}" />
					&nbsp;&nbsp;email:<k:text property="text" styleClass="text" validateRules="{email:true}" />
					&nbsp;&nbsp;电话号码:<k:text property="text" styleClass="text" validateRules="{phoneNumber:true}" />
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：6.支持必填，如下：(<a href="#" id="aDiv6">查看源码</a>)
				</div>
				<div id="div6" style="display: none;">
					必填:&lt;k:text property="text" styleClass="text" validateRules="{required:true}/&gt;<br /> 
				</div>
				<div>
					&nbsp;&nbsp;必填:<k:text property="text" styleClass="text" validateRules="{required:true}" />
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：7.支持 最大值最小值，如下：(<a href="#" id="aDiv7">查看源码</a>)
				</div>
				<div id="div7" style="display: none;">
					最大值输入:&lt;k:text property="text" styleClass="text" validateRules="{maxValue:65535}"/&gt;<br />
					最小值输入:&lt;k:text property="text" styleClass="text" validateRules="{minValue:256}"/&gt;<br />
				</div>
				<div>
					&nbsp;&nbsp;最大值:<k:text property="text" styleClass="text" validateRules="{maxValue:65535}" />
					&nbsp;&nbsp;最小值:<k:text property="text" styleClass="text" validateRules="{minValue:256}" />
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：8.支持 最大长度最小长度，如下：(<a href="#" id="aDiv8">查看源码</a>)
				</div>
				<div id="div8" style="display: none;">
					 最大长度:&lt;k:text property="text" styleClass="text" validateRules="{maxLength:18}"/&gt;<br />
					最小长度:&lt;k:text property="text" styleClass="text" validateRules="{minLength:6}"/&gt;<br />
				</div>
				<div>
					&nbsp;&nbsp;最大长度:<k:text property="text" styleClass="text" validateRules="{maxLength:18}" />
					&nbsp;&nbsp;最小长度:<k:text property="text" styleClass="text" validateRules="{minLength:6}" />
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：9.支持小数位位数校验、添加千分号，如下：(<a href="#" id="aDiv9">查看源码</a>)
				</div>
				<div id="div9" style="display: none;">
					 小数位:&lt;k:text property="text" styleClass="text" validateRules="{decimal:{intPart:2,decimalPart:3}}"/&gt;<br />
					货币格式:&lt;k:text property="text" styleClass="text" formatRules="{currency:true}"/&gt;<br />
				</div>
				<div>
					&nbsp;&nbsp;小数位:<k:text property="text" styleClass="text" validateRules="{decimal:{intPart:3,decimalPart:2}}" />
					&nbsp;&nbsp;货币格式:<k:text property="text" styleClass="text" formatRules="{currency:true}" />
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：10.支持数字格式化，如下：(<a href="#" id="aDiv10">查看源码</a>)
				</div>
				<div id="div10" style="display: none;">
					 只允许整数数字:&lt;k:text property="text" styleClass="text" formatRules="{number:true}"/&gt;<br/>
					 负数及小数数字控制:&lt;k:text property="text" styleClass="text" formatRules="{number:{positive:false,intPart:8,decPart:2}}"/&gt;
				</div>
				<div>
					&nbsp;&nbsp;只允许整数数字:<k:text property="text" styleClass="text" style="width: 100px;" formatRules="{number:true}"/>
					&nbsp;&nbsp;负数及小数数字控制:<k:text property="text" styleClass="text" formatRules="{number:{positive:false,intPart:8,decPart:2}}"/>
				</div>
				<br />
				<!-- ------------------------------------------------------------------------------------------ -->
				<div class="Desc">
					功能：11.支持自定义校验表达式，如下：(<a href="#" id="aDiv11">查看源码</a>)
				</div>
				<div id="div11" style="display: none;">
					 自定义表达式:&lt;k:text property="text" styleClass="text" validateRules="{customExpression:{expression:'/^\\\d+$/',message:'i18n.message.inputDataRight'}}"/&gt;<br />
				</div>
				<div>
					&nbsp;&nbsp;自定义验证表达式:<k:text property="text" styleClass="text" validateRules="{customExpression:{expression:'/^\\\d+$/',message:'i18n.message.inputDataRight'}}" />
				</div>
				<br />
			</div>
		</div>
	</form>
</body>
</html>